  <template>
  <div>
    <!-- <div style="margin: 10px 10px; height: 23px"> -->
    <div
      style="
        float: right;
        margin-right: 10px;
        margin-top: -10px;
        padding: 0 5px;
      "
    >
      <el-button
        type="text"
        :style="{ visibility: Sel_all }"
        @click="DeselectAll"
        >取消全选</el-button
      >
      <el-button type="text">导出</el-button>
    </div>

    <div class="back">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本" name="first" style="margin-left：20px"
          ><el-table
            :data="tableData"
            style="width: 100%"
            :cell-style="tableRowStyle"
            @select="Select"
            @select-all="SelectAll"
            ref="multipleTable"
            height="310px"
          >
            <el-table-column type="selection" width="25"> </el-table-column>
            <el-table-column prop="lastRecoTime" label="检测时间" width="70">
            </el-table-column>
            <el-table-column
              prop="fileName"
              label="检测内容"
              :show-overflow-tooltip="true"
              width="80"
            >
            </el-table-column>
            <el-table-column
              prop="recoContent"
              label="检测结果"
              width="80"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="操作" width="32">
              <i class="el-icon-tickets"></i>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            small
            layout="prev, pager, next"
            :page-size="12"
            :total="60"
            :pager-count="5"
            prev-text="上一页"
            next-text="下一页"
            style="margin-top: 5px"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="告警" name="second"
          ><el-table
            :data="tableData"
            style="width: 100%"
            :cell-style="tableRowStyle"
            @select="Select"
            @select-all="SelectAll"
            ref="multipleTable"
            height="310px"
          >
            <el-table-column type="selection" width="20"> </el-table-column>
            <el-table-column prop="lastRecoTime" label="告警时间" width="58">
            </el-table-column>
            <el-table-column
              prop="fileName"
              label="告警设备"
              width="65"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="recoContent"
              label="告警类型"
              width="65 
        "
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column prop="deal" label="自动处理" width="50">
              是
            </el-table-column>
            <el-table-column label="操作" width="30">
              <i class="el-icon-tickets"></i>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            small
            layout="prev, pager, next"
            :page-size="12"
            :total="60"
            :pager-count="5"
            prev-text="上一页"
            next-text="下一页"
            style="margin-top: 5px"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
          >
          </el-pagination
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!-- </div> -->
</template>

  <script>
export default {
  props: ["Lindex", "Ltime"],
  data() {
    return {
      tableData: [],
      pageno: 1,
      total: 0,
      Sel_all: "hidden",
      activeName: "second",
    };
  },
  mounted() {
    this.getData();
    setInterval(() => {
      this.getData(); // 修改数据date
    }, 5000);
  },
  methods: {
    Select(selection, row) {
      if (selection.length != 0) {
        this.Sel_all = "visible";
      } else {
        this.Sel_all = "hidden";
      }
    },
    SelectAll(selection) {
      console.log;
      if (selection.length != 0) {
        this.Sel_all = "visible";
      } else {
        this.Sel_all = "hidden";
      }
    },
    DeselectAll() {
      this.$refs.multipleTable.clearSelection();
      this.Sel_all = "hidden";
    },
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      if (this.pageno == 1 && this.Lindex == rowIndex) {
        return "background-color:#142766";
      }
    },
    spl(str) {
      return str.trim().split(" ")[1];
    },
    handleCurrentChange(val) {
      this.pageno = val;
      this.getData();
    },
    getData() {
      this.$http
        .get(
          "http://szls.chiefdata.net/server/recognitionFile/getcamerarelist",
          {
            params: {
              pageNo: this.pageno,
              pageSize: 12,
              date: this.Ltime,
            },
          }
        )
        .then(
          (response) => {
            let s = response.body.obj.records;
            this.total = response.body.obj.total;
            this.$emit("setList2Total", this.total);

            for (let i = 0; i < s.length; i++) {
              s[i].lastRecoTime = this.spl(s[i].lastRecoTime);
            }
            this.tableData = s;
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
  },
  watch: {
    Ltime: function (newVal) {
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: 0px solid #ebeef5;
}
/deep/ .el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  border: 0;
  text-align: center;
  padding: 0px 0;
  height: 22px;
}
/deep/ .el-table tr {
  background-color: transparent; /* 背景透明 */
}
/deep/.el-table td {
  color: #ffffff;
  font-size: 10px;
  padding: 0;
  text-align: center;
  height: 22px;
}

/deep/.el-table th > .cell {
  padding-left: 0px;
  line-height: 23px;
}

/deep/ .el-pagination.is-background .el-pager li {
  background-color: transparent;
  border: 1px solid #ffffff;
  font-size: 10px;
  border-radius: 4px;
  min-width: 20px;
  line-height: 18px;
  height: 20px;
}
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 15px;
  width: 60px;
  height: 20px;
}
/deep/.el-table-column--selection .cell {
  padding-left: 0px;
}
/deep/.el-pagination button {
  font-size: 10px;
  line-height: 18px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: transparent;
  border-color: #ffffff;
}
/deep/ .el-checkbox__inner {
  background-color: transparent;
}
/deep/.el-pagination span:not([class*="suffix"]) {
  font-size: 10px;
  line-height: 18px;
}
/deep/.el-table .cell {
  padding-left: 0px;
  padding-right: 0px;
  font-weight: 100;
  line-height: 22px;
}
/deep/.el-table::before {
  background-color: transparent;
}
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  color: #ffffff;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: rgba(256, 256, 256, 0.25) !important;
}
/deep/ .el-table__empty-text {
  line-height: 320px;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 10px;
}
/deep/.el-tabs__item {
  padding: 0px 5px;
  line-height: 14px;
  height: 20px;
  color: #ffffff;
}
/deep/.el-tabs__header {
  margin: 0 0 10px;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-button--text {
  color: #ffffff;
}
.Select {
  background-color: #fff;
}
.back {
  background-image: url(../../assets/image/检测记录-中间框.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px 10px;
  padding: 5px 5px 10px 5px;
  display: float;
}
</style>
